<template>
	<view v-if="canshow" class="store">
		<!-- 状态栏 -->
		<navbar mode="store" title="店铺详情"></navbar>
		<!-- 顶部栏 -->
		<store-detail-top :store="store" @select="select" :nowSelectSwiper="nowSelectSwiper"></store-detail-top>
		<swiper class="swiper" :current="nowSelectSwiper" @change="change">
			<swiper-item>
				<view class="swiper-item">
					<store-detail-page-A style="height: 100%;" :goodsList="goodsList"></store-detail-page-A>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<store-detail-page-B :goodsList="goodsList"></store-detail-page-B>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeId:0,
				store:{},
				canshow:false,
				goodsList:[],
				nowSelectSwiper:0
			};
		},
		onLoad(data) {
			uni.showLoading({})
			this.storeId = data.id
			this.canshow = false
			this.$request("store/getOne",{id:this.storeId},(res)=>{
				this.store = res.data.data[0]
				this.canshow = true
				//查询到店铺后再发送请求查询该店铺的商品
				this.$request("goods/get",{storeId:this.storeId},(res)=>{
					this.goodsList = res.data.data
					this.canshow = true
					uni.hideLoading()
				})
			})
		},
		methods:{
			select(index){
				this.nowSelectSwiper = index
			},
			change(data){
				this.nowSelectSwiper = data.detail.current
			}
		}
	}
</script>

<style lang="scss">
	.store{
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		height: 1334rpx;	
		.swiper{
			height: 100%;
			.swiper-item{
				height: 100%;
				width: 100%;
				//border: 2rpx red solid;
			}
		}
	}
</style>
